import React from 'react';
import { Toast, } from 'antd-mobile';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            id: props.match.params.id,
            money: 0,
            sy_time: 0,
            min: 0,
            sec: 0,
            is_free: 0,
        }
        this.timer=null
    }
	componentDidMount(){
		document.title = '订单详情'
        global.Ajax.hhtc_request("order/detail",{id: this.state.id}).then(data=>{
			if(data.code===1){
				this.setState(data.data,()=>{
                    if(data.data.sy_time>0){
                        this.timer=setInterval(() => {
                            this.djs()
                        }, 1000);
                    }
                })
			}
		})
	}
	componentWillUnmount(){
		if(this.timer){
			clearInterval(this.timer)
		}
    }
    djs(){
        var time=this.state.sy_time;
        if(time>0){
            time--;
            var second = Math.floor(time % 60);             // 计算秒     
            var minite = Math.floor((time / 60) % 60);      //计算分 
            if(minite<10){
                minite='0'+minite
            }
            if(second<10){
                second='0'+second
            }
            this.setState({
                min: minite,
                sec: second,
                sy_time: time,
            })
            
        }else{
            clearInterval(this.timer)
        }
    }
	render(){
		return(
			<div className='check_order order_detail_box' style={{minHeight: '100vh',background: '#F5F5F5',}}>
                <img alt='' src={require('../../imgs/dbg.png')} className='dbg' />
                {this.state.pay_status===0&&<React.Fragment>
                    <p className='p1'>等待付款</p>
                    <p className='p2'>订单将在{this.state.min}分{this.state.sec}秒后关闭</p>
                </React.Fragment>}
                {this.state.pay_status===1&&<React.Fragment>
                    <p className='p1'>购买成功</p>
                    <p className='p2'>感谢您的购买</p>
                </React.Fragment>}
                {this.state.pay_status===2&&<React.Fragment>
                    <p className='p1'>交易关闭</p>
                    <p className='p2'>等待您的购买</p>
                </React.Fragment>}
                
                <div className='index_lj_list'>
                    <div className='item'>
                        <div className='picbox'>
                            <img alt='' src={this.state.img} className='pic' />
                            {this.state.type===1?<p className='bq1'>视频</p>:<p className='bq1'>音频</p>}
                        </div>
                        <div className='right'>
                            <p className='title'>{this.state.title}</p>
                            <p className='desc'>{this.state.info}</p>
                            <p className='peop'>{this.state.author}</p>
                            <div className='flex'>
                                <p className='pri'>{this.state.money*1}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='order_info'>
                    <div className='row'>
                        <p>订单编号</p>
                        <span>{this.state.order_sn}</span>
                    </div>
                    <div className='row'>
                        <p>创建时间</p>
                        <span>{this.state.atime}</span>
                    </div>
                </div>
                <div className='order_pri_box'>
                    <p>订单金额</p>
                    {this.state.is_free===1&&<span>免费</span>}
					{this.state.is_free===2&&<span>￥{this.state.money*1}</span>}
					{this.state.is_free===3&&<span>{this.state.money*1}<img alt='' src={require('../../imgs/hua.png')} style={{width: 14,height: 19,marginLeft:'5px'}} /></span>}
                </div>
                {this.state.pay_status===0&&<div className='bott'>
                    <p>需要支付：</p>
                    {this.state.is_free===1&&<div><h1>免费</h1></div>}
					{this.state.is_free===2&&<h1>{this.state.money*1}元</h1>}
					{this.state.is_free===3&&<div><h1 style={{'display':'flex'}}>{this.state.money*1}<img alt='' src={require('../../imgs/hua.png')} style={{width: 14,height: 19}} /></h1></div>}
                    {/* <h1>{this.state.money*1}元</h1> */}
                    {/* <img alt='' src={require('../../imgs/hua.png')} /> */}
                    <span onClick={()=>{this.props.history.push('/page/home/learn/pay/'+this.state.id+'/1')}}>立即支付</span>
                </div>}
			</div>
		)
	}
}
